<template>
  <div class="equipment-inspection-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>设备点检管理</span>
          <div class="header-operations">
            <el-button type="primary" @click="handleCreatePlan"
              >新建点检计划</el-button
            >
            <el-button type="success" @click="handleCreateTask"
              >创建点检任务</el-button
            >
          </div>
        </div>
      </template>

      <!-- 查询表单 -->
      <el-form :inline="true" :model="queryForm" class="search-form">
        <el-form-item label="设备编码">
          <el-input
            v-model="queryForm.equipmentCode"
            placeholder="请输入设备编码"
          />
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input
            v-model="queryForm.equipmentName"
            placeholder="请输入设备名称"
          />
        </el-form-item>
        <el-form-item label="点检状态">
          <el-select
            v-model="queryForm.status"
            placeholder="请选择点检状态"
            clearable
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="点检日期">
          <el-date-picker
            v-model="queryForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 点检任务列表 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="taskNo" label="任务编号" width="120" />
        <el-table-column prop="equipmentCode" label="设备编码" width="120" />
        <el-table-column prop="equipmentName" label="设备名称" width="150" />
        <el-table-column prop="planName" label="点检计划" width="150" />
        <el-table-column prop="inspector" label="点检人" width="100" />
        <el-table-column prop="planDate" label="计划日期" width="120" />
        <el-table-column prop="actualDate" label="实际日期" width="120" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="result" label="点检结果" width="100">
          <template #default="scope">
            <el-tag :type="getResultType(scope.row.result)">
              {{ getResultText(scope.row.result) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="200">
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="handleInspect(scope.row)"
              v-if="scope.row.status === 'pending'"
              >点检</el-button
            >
            <el-button link type="primary" @click="handleViewDetail(scope.row)"
              >详情</el-button
            >
            <el-button
              link
              type="danger"
              @click="handleCancel(scope.row)"
              v-if="scope.row.status === 'pending'"
              >取消</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 点检计划对话框 -->
    <el-dialog v-model="planDialogVisible" title="点检计划" width="60%">
      <el-form
        ref="planFormRef"
        :model="planForm"
        :rules="planRules"
        label-width="100px"
      >
        <el-form-item label="计划名称" prop="name">
          <el-input v-model="planForm.name" placeholder="请输入计划名称" />
        </el-form-item>
        <el-form-item label="点检类型" prop="type">
          <el-select v-model="planForm.type" placeholder="请选择点检类型">
            <el-option
              v-for="item in inspectionTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="点检周期" prop="cycle">
          <el-select v-model="planForm.cycle" placeholder="请选择点检周期">
            <el-option label="每天" value="daily" />
            <el-option label="每周" value="weekly" />
            <el-option label="每月" value="monthly" />
          </el-select>
        </el-form-item>
        <el-form-item label="设备清单" prop="equipments">
          <el-select
            v-model="planForm.equipments"
            multiple
            placeholder="请选择设备"
          >
            <el-option
              v-for="item in equipmentOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="点检项目">
          <el-button type="primary" @click="handleAddItem">添加项目</el-button>
          <el-table :data="planForm.items" border style="margin-top: 10px">
            <el-table-column prop="name" label="项目名称">
              <template #default="scope">
                <el-input
                  v-model="scope.row.name"
                  placeholder="请输入项目名称"
                />
              </template>
            </el-table-column>
            <el-table-column prop="standard" label="检查标准">
              <template #default="scope">
                <el-input
                  v-model="scope.row.standard"
                  placeholder="请输入检查标准"
                />
              </template>
            </el-table-column>
            <el-table-column prop="method" label="检查方法">
              <template #default="scope">
                <el-input
                  v-model="scope.row.method"
                  placeholder="请输入检查方法"
                />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template #default="scope">
                <el-button
                  link
                  type="danger"
                  @click="handleRemoveItem(scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="planDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handlePlanSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 点检任务对话框 -->
    <el-dialog v-model="taskDialogVisible" title="点检任务" width="50%">
      <el-form
        ref="taskFormRef"
        :model="taskForm"
        :rules="taskRules"
        label-width="100px"
      >
        <el-form-item label="点检计划" prop="planId">
          <el-select v-model="taskForm.planId" placeholder="请选择点检计划">
            <el-option
              v-for="item in planOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="点检人" prop="inspector">
          <el-select v-model="taskForm.inspector" placeholder="请选择点检人">
            <el-option
              v-for="item in inspectorOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="计划日期" prop="planDate">
          <el-date-picker
            v-model="taskForm.planDate"
            type="date"
            placeholder="请选择计划日期"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="taskDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleTaskSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 点检执行对话框 -->
    <el-dialog v-model="inspectDialogVisible" title="点检执行" width="70%">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="任务编号">{{
          currentTask.taskNo
        }}</el-descriptions-item>
        <el-descriptions-item label="设备编码">{{
          currentTask.equipmentCode
        }}</el-descriptions-item>
        <el-descriptions-item label="设备名称">{{
          currentTask.equipmentName
        }}</el-descriptions-item>
        <el-descriptions-item label="点检计划">{{
          currentTask.planName
        }}</el-descriptions-item>
      </el-descriptions>

      <el-table :data="inspectionItems" border style="margin-top: 20px">
        <el-table-column prop="name" label="点检项目" />
        <el-table-column prop="standard" label="检查标准" />
        <el-table-column prop="method" label="检查方法" />
        <el-table-column label="检查结果" width="200">
          <template #default="scope">
            <el-select v-model="scope.row.result" placeholder="请选择">
              <el-option label="正常" value="normal" />
              <el-option label="异常" value="abnormal" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="备注" width="200">
          <template #default="scope">
            <el-input v-model="scope.row.remark" placeholder="请输入备注" />
          </template>
        </el-table-column>
      </el-table>

      <el-form :model="inspectForm" style="margin-top: 20px">
        <el-form-item label="总体评价">
          <el-radio-group v-model="inspectForm.result">
            <el-radio label="normal">正常</el-radio>
            <el-radio label="abnormal">异常</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="处理意见">
          <el-input
            v-model="inspectForm.suggestion"
            type="textarea"
            rows="3"
            placeholder="请输入处理意见"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="inspectDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleInspectSubmit"
            >提交</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

// 查询表单
const queryForm = reactive({
  equipmentCode: "",
  equipmentName: "",
  status: "",
  dateRange: [],
});

// 状态选项
const statusOptions = [
  { value: "pending", label: "待点检" },
  { value: "processing", label: "点检中" },
  { value: "completed", label: "已完成" },
  { value: "cancelled", label: "已取消" },
];

// 点检类型选项
const inspectionTypes = [
  { value: "daily", label: "日常点检" },
  { value: "weekly", label: "周期点检" },
  { value: "monthly", label: "月度点检" },
  { value: "special", label: "专项点检" },
  { value: "maintenance", label: "维护保养" },
];

// 设备选项
const equipmentOptions = [
  { value: "EQ001", label: "数控车床-EQ001" },
  { value: "EQ002", label: "加工中心-EQ002" },
  { value: "EQ003", label: "三坐标测量仪-EQ003" },
  { value: "EQ004", label: "空气压缩机-EQ004" },
  { value: "EQ005", label: "工业机器人-EQ005" },
  { value: "EQ006", label: "激光切割机-EQ006" },
  { value: "EQ007", label: "数控磨床-EQ007" },
];

// 点检人选项
const inspectorOptions = [
  { value: "USER001", label: "张三" },
  { value: "USER002", label: "李四" },
  { value: "USER003", label: "王五" },
  { value: "USER004", label: "赵六" },
  { value: "USER005", label: "钱七" },
];

// 点检计划选项
const planOptions = [
  { value: "PLAN001", label: "数控设备日常点检" },
  { value: "PLAN002", label: "测量设备周检" },
  { value: "PLAN003", label: "关键设备月检" },
  { value: "PLAN004", label: "辅助设备日检" },
  { value: "PLAN005", label: "机器人日常点检" },
  { value: "PLAN006", label: "精密设备专项检查" },
];

// 表格数据
const tableData = ref([
  {
    taskNo: "T202403001",
    equipmentCode: "EQ001",
    equipmentName: "数控车床",
    planName: "数控设备日常点检",
    inspector: "张三",
    planDate: "2024-03-20",
    actualDate: "",
    status: "pending",
    result: "",
  },
  {
    taskNo: "T202403002",
    equipmentCode: "EQ002",
    equipmentName: "加工中心",
    planName: "数控设备日常点检",
    inspector: "李四",
    planDate: "2024-03-20",
    actualDate: "2024-03-20",
    status: "completed",
    result: "normal",
  },
  {
    taskNo: "T202403003",
    equipmentCode: "EQ003",
    equipmentName: "三坐标测量仪",
    planName: "测量设备周检",
    inspector: "王五",
    planDate: "2024-03-20",
    actualDate: "2024-03-20",
    status: "completed",
    result: "abnormal",
  },
  {
    taskNo: "T202403004",
    equipmentCode: "EQ004",
    equipmentName: "空气压缩机",
    planName: "辅助设备日检",
    inspector: "赵六",
    planDate: "2024-03-20",
    actualDate: "",
    status: "processing",
    result: "",
  },
  {
    taskNo: "T202403005",
    equipmentCode: "EQ005",
    equipmentName: "工业机器人",
    planName: "机器人日常点检",
    inspector: "张三",
    planDate: "2024-03-20",
    actualDate: "",
    status: "cancelled",
    result: "",
  },
]);

// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(100);

// 点检计划对话框
const planDialogVisible = ref(false);
const planFormRef = ref(null);
const planForm = reactive({
  name: "",
  type: "",
  cycle: "",
  equipments: [],
  items: [],
});

// 点检任务对话框
const taskDialogVisible = ref(false);
const taskFormRef = ref(null);
const taskForm = reactive({
  planId: "",
  inspector: "",
  planDate: "",
});

// 点检执行对话框
const inspectDialogVisible = ref(false);
const currentTask = ref({});
const inspectionItems = ref([
  {
    name: "外观检查",
    standard: "无明显损坏、变形、锈蚀",
    method: "目视检查",
    result: "",
    remark: "",
  },
  {
    name: "运转检查",
    standard: "运转平稳、无异常噪音、无异常振动",
    method: "开机运行检查",
    result: "",
    remark: "",
  },
  {
    name: "精度检查",
    standard: "各项精度指标在允许误差范围内",
    method: "专用量具测量检查",
    result: "",
    remark: "",
  },
  {
    name: "安全装置",
    standard: "各类安全装置、防护罩完好有效",
    method: "功能测试",
    result: "",
    remark: "",
  },
  {
    name: "润滑系统",
    standard: "油位正常、无漏油、管路畅通",
    method: "检查油位和管路",
    result: "",
    remark: "",
  },
  {
    name: "电气系统",
    standard: "线路完好、接地可靠、开关灵活",
    method: "通电测试",
    result: "",
    remark: "",
  },
]);
const inspectForm = reactive({
  result: "",
  suggestion: "",
});

// 表单校验规则
const planRules = {
  name: [{ required: true, message: "请输入计划名称", trigger: "blur" }],
  type: [{ required: true, message: "请选择点检类型", trigger: "change" }],
  cycle: [{ required: true, message: "请选择点检周期", trigger: "change" }],
  equipments: [{ required: true, message: "请选择设备", trigger: "change" }],
};

const taskRules = {
  planId: [{ required: true, message: "请选择点检计划", trigger: "change" }],
  inspector: [{ required: true, message: "请选择点检人", trigger: "change" }],
  planDate: [{ required: true, message: "请选择计划日期", trigger: "change" }],
};

// 状态和结果显示
const getStatusType = (status) => {
  const statusMap = {
    pending: "warning",
    processing: "primary",
    completed: "success",
    cancelled: "info",
    overdue: "danger",
  };
  return statusMap[status] || "info";
};

const getStatusText = (status) => {
  const statusMap = {
    pending: "待点检",
    processing: "点检中",
    completed: "已完成",
    cancelled: "已取消",
    overdue: "已逾期",
  };
  return statusMap[status] || status;
};

const getResultType = (result) => {
  const resultMap = {
    normal: "success",
    abnormal: "danger",
    attention: "warning",
  };
  return resultMap[result] || "";
};

const getResultText = (result) => {
  const resultMap = {
    normal: "正常",
    abnormal: "异常",
    attention: "需关注",
  };
  return resultMap[result] || "";
};

// 查询方法
const handleSearch = () => {
  ElMessage.success("查询成功");
};

const handleReset = () => {
  queryForm.equipmentCode = "";
  queryForm.equipmentName = "";
  queryForm.status = "";
  queryForm.dateRange = [];
};

// 点检计划方法
const handleCreatePlan = () => {
  planDialogVisible.value = true;
  Object.assign(planForm, {
    name: "",
    type: "",
    cycle: "",
    equipments: [],
    items: [],
  });
};

const handleAddItem = () => {
  planForm.items.push({
    name: "",
    standard: "",
    method: "",
  });
};

const handleRemoveItem = (index) => {
  planForm.items.splice(index, 1);
};

const handlePlanSubmit = async () => {
  if (!planFormRef.value) return;
  await planFormRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success("创建成功");
      planDialogVisible.value = false;
    }
  });
};

// 点检任务方法
const handleCreateTask = () => {
  taskDialogVisible.value = true;
  Object.assign(taskForm, {
    planId: "",
    inspector: "",
    planDate: "",
  });
};

const handleTaskSubmit = async () => {
  if (!taskFormRef.value) return;
  await taskFormRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success("创建成功");
      taskDialogVisible.value = false;
    }
  });
};

// 点检执行方法
const handleInspect = (row) => {
  currentTask.value = row;
  inspectDialogVisible.value = true;
  inspectionItems.value.forEach((item) => {
    item.result = "";
    item.remark = "";
  });
  inspectForm.result = "";
  inspectForm.suggestion = "";
};

const handleInspectSubmit = () => {
  if (!inspectForm.result) {
    ElMessage.warning("请选择总体评价");
    return;
  }
  ElMessage.success("提交成功");
  inspectDialogVisible.value = false;
};

// 其他方法
const handleViewDetail = (row) => {
  ElMessage.success("查看详情：" + row.taskNo);
};

const handleCancel = (row) => {
  ElMessageBox.confirm("确认取消该点检任务？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    ElMessage.success("取消成功");
  });
};

// 分页方法
const handleSizeChange = (val) => {
  pageSize.value = val;
  handleSearch();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  handleSearch();
};
</script>

<style scoped>
.equipment-inspection-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-operations {
  display: flex;
  gap: 10px;
}

.search-form {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.dialog-footer {
  text-align: right;
}
</style>
